<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <c:set var="contextPath" value="${pageContext.request.contextPath}"/>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Login and Registration Form with HTML5 and CSS3"/>
    <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class"/>
    <meta name="author" content="Codrops"/>
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="${contextPath}/libs/loginUI/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/libs/loginUI/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="${contextPath}/libs/loginUI/css/animate-custom.css"/>

    <script src="${contextPath}/libs/jquery/jquery.min.js"></script>
    <script src="${contextPath}/libs/layer/layer.js"></script>
</head>
<body>

<div class="container">
    <section>
        <div id="container_demo">
            <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
            <a class="hiddenanchor" id="toregister"></a>
            <a class="hiddenanchor" id="tologin"></a>
            <div id="wrapper">
                <div id="login" class="animate form">
                    <form id="loginForm" method="post" autocomplete="on">
                        <h1>Log in</h1>
                        <span class="js-error-message" style="color: red;font-size: 12px;"></span>
                        <p>
                            <label for="username" class="uname" data-icon="u"> 账号 </label>
                            <input id="username" name="username" required="required" type="text"
                                   placeholder="用户名 / 手机号码 / 邮箱"/>
                        </p>
                        <p>
                            <label for="password" class="youpasswd" data-icon="p"> 密码 </label>
                            <input id="password" name="password" required="required" type="password" placeholder="密码"/>
                        </p>
                        <p class="keeplogin">
                            <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping"/>
                            <label for="loginkeeping">Keep me logged in</label>
                        </p>
                        <p class="login button">
                            <input type="submit" value="登录"/>
                        </p>
                        <p class="change_link">
                            Not a member yet ?
                            <a href="#toregister" class="to_register">注册</a>
                        </p>
                    </form>
                </div>

                <div id="register" class="animate form">
                    <form id="registerForm" autocomplete="on">
                        <h1> Sign up </h1>
                        <p>
                            <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                            <input id="usernamesignup" name="usernamesignup" required="required" type="text"
                                   placeholder="mysuperusername690"/>
                        </p>
                        <p>
                            <label for="emailsignup" class="youmail" data-icon="e"> Your email</label>
                            <input id="emailsignup" name="emailsignup" required="required" type="email"
                                   placeholder="mysupermail@mail.com"/>
                        </p>
                        <p>
                            <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                            <input id="passwordsignup" name="passwordsignup" required="required" type="password"
                                   placeholder="eg. X8df!90EO"/>
                        </p>
                        <p>
                            <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your
                                password </label>
                            <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required"
                                   type="password" placeholder="eg. X8df!90EO"/>
                        </p>
                        <p class="signin button">
                            <input type="submit" value="Sign up"/>
                        </p>
                        <p class="change_link">
                            Already a member ?
                            <a href="#tologin" class="to_register"> Go and log in </a>
                        </p>
                    </form>
                </div>

            </div>
        </div>
    </section>
</div>

<script>
    $(function () {
        $("#loginForm").on("submit", function (e) {
            // ajax提交表单
            $.ajax({
                type: "POST",
                url: '${contextPath}/login',
                dataType: 'json',
                data: $('#loginForm').serialize(),
                success: function (result) {
                    var user = result['user'];
                    if (!user) {
                        $(".js-error-message").text("用户名或密码错误");
                        return;
                    }
                    // 跳转到菜单界面
                    location.href = '${contextPath}/menu';
                }
            });
            e.preventDefault();
        });
    });
</script>
</body>
</html>
